<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../tf-imports/plottable.html">
<link rel="import" href="../tf-imports/lodash.html">

<!--
tf-chart (TFChart) creates an element that draws a line chart for displaying event values.
It has the following settable properties:
  tag: (required, string) - the name of the tag to load for this chart
  selectedRuns: (required, string[]) - the runs the chart should display
  xType: (required, string) - the way to display x values - allows "step" or "wall_time"
  dataCoordinator: (required, TF.DataCoordinator) - the data coordinator for talking to backend
  colorScale: (required, Plottable.Scales.Color) - maps from runs to colors
  tooltipUpdater: (required, function) - allows the chart to modify tooltips

It exposes the following methods:
  redraw() - cause the chart to re-render (useful if e.g. container size changed)

The data is expected to be an array of [wall_time, step, value] arrays.
The wall_time is serialized as seconds since epoch.
-->
<dom-module id="tf-chart">
  <template>
    <svg id="chartsvg"></svg>
    <style>
      :host {
        -webkit-user-select: none;
        -moz-user-select: none;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 1;
      }
      svg {
        -webkit-user-select: none;
        -moz-user-select: none;
        flex-grow: 1;
        flex-shrink: 1;
      }
      .plottable .crosshairs line.guide-line {
        stroke: #777;
      }
    </style>
  </template>
  <script src="dragZoomInteraction.js"></script>
  <script src="tf-chart.js"></script>
  <script>
    Polymer({
      is: "tf-chart",
      properties: {
        type: String, // "scalar" or "compressedHistogram"
        _chart: Object,
        colorScale: Object,
        tag: String,
        selectedRuns: Array,
        xType: String,
        dataCoordinator: Object,
        tooltipUpdater: Function,
        _initialized: Boolean,
      },
      observers: [
        "_makeChart(type, tag, dataCoordinator, tooltipUpdater, xType, colorScale, _initialized)",
        "_changeRuns(_chart, selectedRuns.*)"
      ],
      _changeRuns: function(chart, change) {
        this._chart.changeRuns(this.selectedRuns);
        this.redraw();
      },
      redraw: function() {
        this._chart.redraw();
      },
      _constructor: function(type) {
        if (type === "scalar") {
          return TF.LineChart;
        } else if (type === "compressedHistogram") {
          return TF.HistogramChart;
        } else {
          throw new Error("Unrecognized chart type");
        }
      },
      _makeChart: function(type, tag, dataCoordinator, tooltipUpdater, xType, colorScale, _initialized) {
        if (!_initialized) {
          return;
        }
        if (this._chart) this._chart.destroy();
        var cns = this._constructor(type);
        var chart = new cns(tag, dataCoordinator, tooltipUpdater, xType, colorScale);
        var svg = d3.select(this.$.chartsvg);
        this.async(function() {
          chart.renderTo(svg);
          this._chart = chart;
        }, 350);
      },
      attached: function() {
        this._initialized = true;
      },
      detached: function() {
        this._initialized = false;
      }
    });
  </script>
</dom-module>
